<template>
  <div class="product-type">
    <div class="second" @click="goProduct">
      <div class="item" v-for="item in secondCategoryList" :key="item.id" :class="isSelectedIndex==item.id ? 'active' :''" :data-id="item.id" :data-name="item.name">
        {{item.name}}
      </div>
    </div>
    <a-collapse default-active-key="1" :bordered="false">
      <a-collapse-panel key="1" :header="isSelectedName" class="collapse-content" v-if="secondCategoryList.length > 0">
        <ul class="card-block"  @click="goToDetails">
          <li v-for="item in productArr" :key="item.id" :name="item.name"><span class="name" :data-id="item.id">{{ item.name }}</span><span class="remark">{{item.remark}}</span></li>
        </ul>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>
<script>
import {ref, onMounted,watch} from 'vue'
import {getSecondCategory, getProductList} from "../../api/product";
import {useRoute, useRouter} from "vue-router";
export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const secondCategoryList = ref([])
    const productArr = ref([])
    let isSelectedIndex = ref(1)
    let isSelectedName = ref("")
    watch(route, () => {
      getSecond(route.params.id * 1)
    })
    onMounted(()=>{
      getSecond(route.params.id * 1)
    })
    const getSecond = (data) => {
      getSecondCategory(data).then((res)=>{
        if(res && res.code === 200){
          if(res.data && res.data.length > 0){
            secondCategoryList.value = res.data
            isSelectedIndex.value = res.data[0].id
            isSelectedName.value = res.data[0].name
            getData({
              "page": 1,
              "page_size": 100,
              "plan_id": "",
              "first_category": "",
              "second_category":data
            })
          }
        }
      })
    }
    const goToDetails = (el)=>{
      if(el.target.dataset.id){
        router.push({path:'/product/detail',query:{id:el.target.dataset.id*1}});
        window._czc.push(['_trackEvent', '点击', '进入到产品详情页面','产品名称：'+el.target.name]);
      }
    }
    const getData = (data)=> {
      getProductList({
        "page": data.page,
        "page_size": data.page_size,
        "plan_id": data.plan_id,
        "first_category": data.first_category,
        "second_category": data.second_category
      }).then((res) => {
        if (res && res.code === 200) {
          productArr.value = res.data
        }
      })
    }
    const goProduct = (el) => {
      if(el.target.dataset.id){
        isSelectedIndex.value = el.target.dataset.id *1
        isSelectedName.value = el.target.dataset.name
        getData({
          "page": 1,
          "page_size": 100,
          "plan_id": "",
          "first_category": "",
          "second_category":el.target.dataset.id *1
        })
      }
    }
    return {
      secondCategoryList,
      productArr,
      goToDetails,
      getData,
      isSelectedIndex,
      goProduct,
      isSelectedName,
      getSecond
    }
  },
};
</script>
<style lang="scss" scoped>
.product-type{
  margin:20px 0;
  .second{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 20px;
    margin-bottom: 20px;
    .item{
      cursor:pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .active{
      color:#1890ff;
    }
  }
  .collapse-content{
    border-bottom:none;
    ::v-deep .ant-collapse-header{
      background-color:#2e2e2e;
      color:white;
      font-size:16px;
      padding-left: 35px;
    }
    ::v-deep .ant-collapse-content-box{
      padding:0;
    }
    .card-block{
      font-size:15px;
      font-weight:700;
      padding-left: 0;
      margin-bottom: 0;
      li{
        display:flex;
        justify-content:flex-start;
        color:#888;
        .name{
          display:inline-block;
          width:400px;
          padding:16px 32px;
          box-sizing: border-box;
          cursor:pointer;
        }
        .remark{
          padding:16px 32px;
        }
      }
      li:nth-child(2n){
        background-color:#eee;
      }
      li:nth-child(2n+1){
        background-color:white;
      }
    }
  }
}
</style>
